<template>
  <div class="list" ref='list'>
  	<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :autoFill='false' :bottom-all-loaded="allLoaded" ref="loadmore">
		<ul>
			<li v-for="(item,index) in vue_goods_allList" v-show="vue_goods_allList.length!=0">
				<p class="orderType" :class="{grey:item.vue_order_type==-1}">
					{{item.orderTypeName}} <i @click="vFun_order_delete(item.orderCode)" v-if="item.vue_order_type==6||item.vue_order_type==-1" class="iconfont" style="vertical-align: middle;color:#bbb;font-size:.5rem;">&#xe61c;</i>
				</p>
				<div class="goods clearfix">
					<template v-if="item.saleOrderGoodsDataList.length!=1">
  					<div class="rightIcon" @click="vFun_order_goDetail(item.orderCode,item.vue_order_type,item.saleOrderGoodsDataList)">
  						<div class="over">
			  				<ul class="contentDetail clearfix" :style="{width: (2.16*item.saleOrderGoodsDataList.length)+'rem'}">
			  					<li class="fl" v-for="(item,index) in item.saleOrderGoodsDataList">
			  						<img :src="item.goodsBigPic" width="100%" height="100%" alt="" />
			  					</li>
			  				</ul>
		  				</div>
	  					<Icon type="chevron-right lookDetail"></Icon>
	  				</div>
  				</template>
  				<template v-else>
  					<div class="goodsOnly clearfix" @click="vFun_order_goDetail(item.orderCode,item.vue_order_type,item.saleOrderGoodsDataList)">
							<div class="img fl">
		  					<img :src="item.saleOrderGoodsDataList[0].goodsBigPic" width="100%" height="100%" alt="" />
		  				</div>
		  				<div class="detail fl">
		  					<p class="title">{{item.saleOrderGoodsDataList[0].goodsName}}</p>
		  					<p class="spe">{{item.saleOrderGoodsDataList[0].goodsSkuValue}}</p>
		  					<p class="pri">
		  						&yen; {{Public.formatMoney(item.saleOrderGoodsDataList[0].goodsSalePrice,2)}}
		  					</p>
		  				</div>
						</div>
  				</template>
				</div>
				<p class="pric">
					共{{item.countNum}}件商品 需付款：  &yen; {{Public.formatMoney(item.countPric,2)}}
				</p>
				<div class="btn clearfix">
					<div class="okBtn fr" @click="vFun_order_operation(item1.btnType,item.orderCode)" :class="item1.btnClass" v-for="(item1,index1) in item.btn">{{item1.name}}</div>
				</div>
			</li>
			<li style="width:10rem;height: 10rem;min-height: 10rem;background:#fff;margin:0" v-show="vue_goods_allList.length==0">
				<img style="margin:auto;width: 3rem;padding-top: 4rem;" src="../../assets/img/noContent.png" width="70%" height="auto" alt="" />
			</li>
		</ul>
		</mt-loadmore>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';  //引入弹框
import { MessageBox } from 'mint-ui';
export default {
  data () {
    return {
    	allLoaded:false,
    	saleOrderQb:{  //查询数据的QB对象
    		offset:0,  //起始数据
    		limit:4  //一页几条
    	},
    	vue_goods_allList:[],   //goodsList数据
    }
  },
  methods:{
  	loadBottom(){
  		setTimeout(()=>{
  			this.saleOrderQb.limit=2;
	  		this.query_wxList(false);
	  		this.$refs.loadmore.onBottomLoaded();
  		},1000)
  	},
  	loadTop(){
  		setTimeout(()=>{
  			this.saleOrderQb={offset:0,limit:4};
	  		this.query_wxList(true);
	  		this.$refs.loadmore.onTopLoaded();
  		},1000)
  	},
  	query_wxList(loadTop){  //请求list
  		this.axios({
  			method:"POST",
  			url:"/v3/sale/orders/unpaidList",
  			data:{
  				'offset':this.saleOrderQb.offset,
  				'limit':this.saleOrderQb.limit
  			}
  		}).then((res)=>{
  			res.data.list.forEach((item,index,arr)=>{
  				item.countNum = item.saleOrderGoodsDataList.reduce((previousValue,currentValue)=>{
  					return previousValue+currentValue.goodsBuyNum;
  				},0);
  				item.countPric = item.saleOrderGoodsDataList.reduce((previousValue,currentValue)=>{
  					return previousValue+currentValue.goodsBuyNum*currentValue.goodsSalePrice;
  				},0);
  				if(item.dataBillstate=='-1'){
  					item.orderTypeName='已取消';
  					item.vue_order_type=-1;
  					item.btn=[{name:'再次购买',btnClass:'red',btnType:'1'}];
  				}else{
  					if(item.orderPayState!='3'){
  						item.orderTypeName='等待付款';
  						item.vue_order_type=3;
  						item.btn=[{name:'去支付',btnClass:'red',btnType:'2'}];
  					}else{
  						if(item.dataBillstate=='6'){
  							item.orderTypeName='已完成';
  							item.vue_order_type=6;
  							item.btn=[{name:'再次购买',btnClass:'red',btnType:'1'}];
  						}else{
  							item.orderTypeName='等待收货';
  							item.vue_order_type=5;
  							item.btn=[{name:'确认收货',btnClass:'red',btnType:'3'},{name:'再次购买',btnClass:'grey',btnType:'1'}];
  						}
  					}
  				}
  				if(!loadTop){
  					this.vue_goods_allList.push(item);
  				}
  			});
  			if(loadTop){
  				this.vue_goods_allList=res.data.list;
  			};
  			this.saleOrderQb.offset+=this.saleOrderQb.limit;
  			this.allLoaded=!(res.data.list.length==this.saleOrderQb.limit);
  		}).catch((err)=>{

  		})
  	},
  	vFun_order_delete(orderCode){  //删除订单
  		MessageBox({
			  title: '提示',
			  message: '确定删除订单?',
			  showCancelButton: true
			}).then((a)=>{
				if(a=='confirm'){
					this.axios({
		  			method:"DELETE",
		  			url:"/v3/sale/orders/"+orderCode
		  		}).then((res)=>{
						this.saleOrderQb={offset:0,limit:4};
		  			this.query_wxList(true);
		  			Toast({
						  message: '操作成功',
						  iconClass: 'fontSize iconfont icon-chenggong'
						});
					}).catch((err)=>{
						Toast({
						  message: '操作失败',
						  iconClass: 'fontSize iconfont icon-shibai'
						});
					})
				}else{

				}
			})
  	},
  	vFun_order_goDetail(orderCode,orderType,list){  //跳转订单详情
  		this.$router.push({ path:'/orderDetail',query:{'orderCode':orderCode,'orderType':orderType} });
  		localStorage.setItem('saleOrderGoodsDataList',JSON.stringify(list));
  	},
  	vFun_order_operation(btnType,orderCode){  //订单对应的操作按钮
  		switch(btnType){
  			case '1':
		     	 this.axios({
		     	 	method:"POST",
		     	 	url:"/v3/sale/cartGoodss/"+orderCode+"/buyAgain",
		     	 	data:{}
		     	 }).then((res)=>{
		     	 	this.$router.push({path:'/shopingCart'})
		     	 	Toast({
						  message: '操作成功',
						  iconClass: 'fontSize iconfont icon-chenggong'
						});
		     	 }).catch((err)=>{
		     	 	Toast({
						  message: '操作失败',
						  iconClass: 'fontSize iconfont icon-shibai'
						});
		     	 })
  			break;
  			case '2':
  				localStorage.setItem('orderCode',orderCode)
  				this.$router.push({path:'/orderPay'})
  			break;
  			case '3':
  				MessageBox({
					  title: '提示',
					  message: '确定收货?',
					  showCancelButton: true
					}).then((a)=>{
						if(a=='confirm'){
							this.axios({
								method:"PATCH",
								url:"/v3/sale/orders/"+orderCode+"/batchConfirmshipment",
								data:{}
							}).then((res)=>{
								this.saleOrderQb={offset:0,limit:4};
				  			this.query_wxList(true);
				  			Toast({
								  message: '操作成功',
								  iconClass: 'fontSize iconfont icon-chenggong'
								});
							}).catch((err)=>{
								Toast({
								  message: err.response.data,
								  iconClass: 'fontSize iconfont icon-shibai'
								});
							})
						}else{

						}
					})
  			break;
  		}
  	}
  },
  created(){
  },
  mounted(){
  },
  activated(){
		this.saleOrderQb={offset:0,limit:4};
  	this.query_wxList(true);  //请求list
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.list{
		width:100%;
		background:#D2D3D9;
		margin-top:56px;
	}
	.list li{
		width:100%;
		background:#fff;
		margin-bottom:10px;
	}
	.list li .orderType{
		width:100%;
		text-align:right;
		color:#D50B0A;
		line-height:0.88rem;
		padding:0 10px;
		border-bottom:1px solid #bbb;
		vertical-align:middle;
	}
	.list li .grey{
		color:#bbb;
	}
	.list li .goods{
		width:100%;
		height:2.66rem;
		padding:0.4rem 10px;
		border-bottom:1px solid #bbb;
		background:#F5F7F6;
	}
	.list li .goods>div>div.over{
		width:8.5rem;
		overflow-x:auto;
	}
	.list li .goods ul{
		width:100rem;
		height:1.86rem;
	}
	.list li .goods li{
		width:1.86rem;
		height:1.86rem;
		margin-right:.3rem;
		margin-bottom:0;
	}
	.rightIcon{
		position:relative;
	}
	.rightIcon .lookDetail{
		position:absolute;
		top:50%;
		right:.3rem;
		font-size:14px;
		transform:translateY(-50%);
	}
	.list li .goods .img{
		width:1.86rem;
		height:1.86rem;
	}
	.list li .goods .detail{
		width:7.5rem;
		height:1.86rem;
		line-height:0.46rem;
		overflow:hidden;
		padding-left:10px;
	}
	.list li .goods .detail .title{
		width:100%;
		height:0.92rem;
		overflow:hidden;
	}
	.list li .goods .detail .spe{
		width:100%;
		height:0.46rem;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		color:#ccc;
	}
	.list li .goods .detail .pri{
		width:100%;
		height:0.46rem;
		overflow:hidden;
		color:#D50B0A;
	}
	.list li .pric{
		width:100%;
		text-align:right;
		line-height:0.88rem;
		padding:0 10px;
		border-bottom:1px solid #bbb;
	}
	.list li .btn{
		width:100%;
		padding:0 10px;
		border-bottom:1px solid #bbb;
	}
	.list li .btn .okBtn{
		width: 2.08rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    margin: .265rem 10px;
    color: #736D6E;
    border: 1px solid #736D6E;
    border-radius: 5px;
	}
	.list li .btn .red{
		color: #D50B0A;
    border-color: #D50B0A;
	}
	.list li .btn .grey{
		color: #bbb;
    border-color: #bbb;
	}
</style>
